<template>
  <div>
    <el-menu
      :default-active="$route.path"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router="true"
    >
      <el-submenu v-for="item in management" :key="item.id" :index="item.id">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{ item.name }}</span>
        </template>

        <el-menu-item
          v-for="arr in item.ListPage"
          :key="arr.id"
          :index="arr.path"
          >{{ arr.name }}</el-menu-item
        >
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      management: [
        {
          id: "1",
          name: "学生管理",
          ListPage: [
            { id: "1", name: "学生列表", path: "/home/studentList" },
            { id: "2", name: "新增学生", path: "/home/studentAdd" },
          ],
        },
        {
          id: "2",
          name: "班级管理",
          ListPage: [
            { id: "1", name: "班级列表", path: "/home/classList" },
            { id: "2", name: "新增班级", path: "/home/classAdd" },
          ],
        },
        {
          id: "3",
          name: "专业管理",
          ListPage: [{ id: "1", name: "专业列表", path: "/home/subjectsList" }],
        },
        {
          id: "4",
          name: "课程管理",
          ListPage: [
            { id: "1", name: "课程列表", path: "/home/coursesList" },
            { id: "2", name: "新增课程", path: "/home/coursesAdd" },
          ],
        },
        {
          id: "5",
          name: "教师管理",
          ListPage: [
            { id: "1", name: "教师列表", path: "/home/teacherList" },
            { id: "2", name: "新增教师", path: "/home/teacherAdd" },
          ],
        },
      ],
    };
  },
  created() {
    this.getAuthMenusAsync();
  },
  computed: {
    ...mapState(["authMenus"]),
    // // 根据权限数据 authMenus，筛选完整菜单 menus，得到一个权限菜单 filterMenus
    // filterMenus() {
    //   const authMenus = this.menus
    //     .map((item) => {
    //       // 筛选和权限菜单匹配的二级菜单
    //       const authChild = item.children.filter((child) => {
    //         return this.authMenus.includes(child.path);
    //       });
    //       console.log("authMenus", ListPage);
    //       // 返回一级菜单对象，同时将原本的子菜单改为满足权限的子菜单
    //       return { ...item, children: authChild };
    //     })
    //     .filter((item) => item.children.length > 0); // 去掉没有子菜单的一级菜单
    //     return authMenus
    // },
  },
  methods: {
    ...mapActions(["getAuthMenusAsync"]),
  },
};
</script>

<style>
.el-submenu__ title:hover {
  background-color: blue !important;
}
</style>

<style scoped>
.el-menu {
  border-right: none;
}
.el-menu-item:hover {
  background-color: blue !important;
}
</style>
